﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="VTV.TaskManagementSystem.WebApp.Admin.Team.List" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/Team.js"></script>
    <link href="../../Styles/Main.css" rel="stylesheet" />
    <script>
        function ClearAllTextbox() {
            document.getElementById('txtName-inputEl').value = '';
            document.getElementById('txtNote-inputEl').value = '';
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport runat="server"
            ID="viewPort"
            Layout="Border">

            <Items>
                <ext:Panel runat="server"
                    ID="pnlList"
                    Title="Danh sách nhóm"
                    Region="Center"
                    Layout="Fit">

                    <Items>
                        <ext:GridPanel runat="server"
                            ID="gridTeam" EmptyText="No data" Margins="2 0 0 0">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar1" runat="server">
                                    <Items>
                                        <ext:Button runat="server" ID="btnAdd" Text="Thêm mới" Icon="GroupAdd" OnDirectClick="btnAdd_Click" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Store>
                                <ext:Store runat="server" ID="storeEmployee" PageSize="10" WarningOnDirty="True"
                                    OnReadData="storeEmployee_OnReadData">
                                    <Model>
                                        <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                            <Fields>
                                                <ext:ModelField Name="TeamID" Mapping="TeamID" Type="Int" />
                                                <ext:ModelField Name="Name" Mapping="Name" Type="String" />
                                                <ext:ModelField Name="Note" Mapping="Note" Type="String" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                    <Proxy>
                                        <ext:PageProxy />
                                    </Proxy>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column runat="server" Text="Tên" DataIndex="Name" Flex="1" />
                                    <ext:Column runat="server" Text="Ghi chú" DataIndex="Note" Flex="1" />

                                    <ext:CommandColumn runat="server" Width="60">
                                        <Commands>
                                            <ext:GridCommand Icon="Delete" CommandName="Delete">
                                                <ToolTip Text="Xóa" />
                                            </ext:GridCommand>
                                            <ext:CommandSeparator />
                                            <ext:GridCommand Icon="NoteEdit" CommandName="Edit">
                                                <ToolTip Text="Sửa" />
                                            </ext:GridCommand>
                                        </Commands>

                                        <DirectEvents>
                                            <Command OnEvent="gridTeam_OnCommand">
                                                <ExtraParams>
                                                    <ext:Parameter Name="TeamID" Mode="Raw" Value="record.data.TeamID" />
                                                    <ext:Parameter Name="Command" Mode="Raw" Value="command" />
                                                </ExtraParams>
                                            </Command>
                                        </DirectEvents>
                                    </ext:CommandColumn>
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel runat="server" Mode="Single">
                                    <DirectEvents>
                                        <Select OnEvent="gridTeam_OnRowSelected">
                                            <ExtraParams>
                                                <ext:Parameter Name="TeamID" Mode="Raw" Value="record.data.TeamID" />
                                                <ext:Parameter Name="TeamName" Mode="Raw" Value="record.data.Name" />
                                            </ExtraParams>
                                        </Select>
                                    </DirectEvents>
                                </ext:RowSelectionModel>
                            </SelectionModel>
                            <BottomBar>
                                <ext:PagingToolbar ID="pagingToolbar" runat="server" FirstText="Trang đầu" PrevText="Trang trước"
                                    NextText="Trang tiếp" LastText="Trang cuối" BeforePageText="Trang" AfterPageText="trên {0}"
                                    DisplayMsg="Danh sách {0} - {1} / tổng số {2}" />
                            </BottomBar>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
                
                <ext:Panel runat="server" ID="pnlEmployeeList"
                    BodyPadding="2"
                    AutoScroll="True"
                    Height="400"
                    Region="South"
                    Title="Chia nhóm"
                    Layout="Fit"
                    Collapsible="true"
                    Split="true"
                    Frame="True"
                    Margins="5 0 0 0">
                    <Items>
                        <ext:GridPanel runat="server" ID="GridPanel1" EmptyText="No data">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar2" runat="server">
                                    <Items>
                                        <ext:Button runat="server" ID="btnAddTeam" Text="Thêm mới" Icon="Add" OnDirectClick="btnAddEmployee_Click" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Store>
                                <ext:Store runat="server" ID="store1">
                                    <Model>
                                        <ext:Model ID="Model2" runat="server" IDProperty="ID">
                                            <Fields>
                                                <ext:ModelField Name="EmployeeID" Mapping="EmployeeID" Type="Int" />
                                                <ext:ModelField Name="TeamID" Mapping="TeamID" Type="Int" />
                                                <ext:ModelField Name="FullName" Mapping="FullName" Type="String" />
                                                <ext:ModelField Name="Email" Mapping="Email" Type="String" />
                                                <ext:ModelField Name="Phone" Mapping="Phone" Type="String" />
                                                <ext:ModelField Name="Note" Mapping="Note" Type="String" />
                                                <ext:ModelField Name="IsTeamLead" Mapping="IsTeamLead" Type="Boolean" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column runat="server" Text="Tên" DataIndex="FullName" Width="200" />
                                    <ext:Column runat="server" Text="Nhóm trưởng" DataIndex="IsTeamLead" Width="120">
                                        <Renderer Fn="status1" />
                                    </ext:Column>
                                    <ext:Column runat="server" Text="Email" DataIndex="Email" Width="180" />
                                    <ext:Column runat="server" Text="Điện thoại" DataIndex="Phone" Width="120" />
                                    <ext:Column runat="server" Text="Ghi chú" DataIndex="Note" Flex="1" />

                                    <ext:CommandColumn ID="CommandColumn1" runat="server" Width="60">
                                        <Commands>
                                            <ext:GridCommand Icon="Delete" CommandName="Delete">
                                                <ToolTip Text="Xóa" />
                                            </ext:GridCommand>
                                            <ext:CommandSeparator />
                                            <ext:GridCommand Icon="NoteEdit" CommandName="Edit">
                                                <ToolTip Text="Sửa" />
                                            </ext:GridCommand>
                                        </Commands>

                                        <DirectEvents>
                                            <Command OnEvent="gridEmployee_OnCommand">
                                                <ExtraParams>
                                                    <ext:Parameter Name="EmployeeID" Mode="Raw" Value="record.data.EmployeeID" />
                                                    <ext:Parameter Name="TeamID" Mode="Raw" Value="record.data.TeamID" />
                                                    <ext:Parameter Name="Command" Mode="Raw" Value="command" />
                                                </ExtraParams>
                                            </Command>
                                        </DirectEvents>
                                    </ext:CommandColumn>
                                </Columns>
                            </ColumnModel>
                            <View>
                                <ext:GridView ID="GridView1" runat="server" />
                            </View>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>

        <ext:Window runat="server"
            ID="windowDetailTeam"
            Title="Thông tin nhóm"
            Width="350"
            Height="140"
            Hidden="True"
            Closable="False"
            Resizable="False"
            BodyStyle="background-color:#fff;"
            BodyPadding="5"
            Layout="Form">
            <Items>
                <ext:Panel ID="Panel1" runat="server"
                    BodyPadding="5"
                    Border="False"
                    Header="False"
                    Layout="AnchorLayout">
                    <Items>
                        <ext:Panel
                            Border="False"
                            Header="False"
                            AnchorHorizontal="100%"
                            Layout="FormLayout">
                            <Items>
                                <ext:TextField runat="server" ID="txtName" FieldLabel="Tên nhóm" />
                                <ext:TextField runat="server" ID="txtNote" FieldLabel="Ghi chú" />
                                <ext:Hidden runat="server" ID="TeamID" />
                            </Items>
                        </ext:Panel>
                    </Items>
                    <Buttons>
                        <ext:Button runat="server" ID="btnSave" Text="Lưu" Icon="Disk">
                            <DirectEvents>
                                <Click OnEvent="btnSave_Click">
                                    <EventMask ShowMask="true" Msg="Đang lưu..." MinDelay="500" />
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                        <ext:Button ID="btnCancel" Text="Quay lại" Icon="BuildCancel" OnClientClick="#{windowDetailTeam}.close();">
                            <Listeners>
                                <Click Fn="ClearAllTextbox" Handler=""></Click>
                            </Listeners>
                        </ext:Button>
                    </Buttons>
                </ext:Panel>


            </Items>
        </ext:Window>
        
        <ext:Window runat="server"
            ID="windowDetailEmployee"
            Icon="Report"
            Width="380"
            Height="160"
            Hidden="True"
            Closable="False"
            Resizable="False"
            BodyStyle="background-color:#fff;"
            BodyPadding="5"
            Layout="Form">
            <Items>
                <ext:Panel ID="Panel2" runat="server"
                    BodyPadding="5"
                    Border="False"
                    Header="False"
                    Layout="AnchorLayout">
                    <Items>
                        <ext:Panel
                            Border="False"
                            Header="False"
                            AnchorHorizontal="100%"
                            Layout="FormLayout">
                            <Items>
                                <ext:ComboBox ID="cbbEmployeeList" runat="server"
                                    DisplayField="FullName"
                                    ValueField="EmployeeID"
                                    PageSize="5"
                                    TypeAhead="true"
                                    HideBaseTrigger="false"
                                    AllowBlank="False"
                                    MinChars="1"
                                    FieldLabel="Họ và tên">
                                    <ListConfig LoadingText="Đang tìm kiếm...">
                                        <ItemTpl ID="ItemTpl1" runat="server">
                                            <Html>
                                                <div class="search-item">
                                                    <p><h3><name>{FullName}</name></h3></p>
                                                    <p><h3><note>{Email}</note></h3></p>
                                                </div>
                                            </Html>
                                        </ItemTpl>
                                    </ListConfig>

                                    <Store>
                                        <ext:Store runat="server" AutoLoad="False" ID="storeEmployeeCBB" OnReadData="storestoreEmployeeCBB_OnReadData" PageSize="5" WarningOnDirty="False">
                                            <Model>
                                                <ext:Model ID="Model3" runat="server" IDProperty="ID">
                                                    <Fields>
                                                        <ext:ModelField Name="EmployeeID" Mapping="EmployeeID" Type="Int" />
                                                        <ext:ModelField Name="FullName" Mapping="FullName" Type="String" />
                                                        <ext:ModelField Name="Email" Mapping="Email" Type="String" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                            <Proxy>
                                                <ext:PageProxy />
                                            </Proxy>
                                        </ext:Store>
                                    </Store>
                                </ext:ComboBox>
                                <ext:Checkbox runat="server" ID="ckbIsTeamLead" FieldLabel="Nhóm trưởng" />
                                <ext:TextField runat="server" ID="txtEmployeeNote" FieldLabel="Chú ý" />
                                <ext:Hidden runat="server" ID="hiddenEmployeeID" />
                                <ext:Hidden runat="server" ID="hiddenTeamID" />
                            </Items>
                        </ext:Panel>
                    </Items>
                    <Buttons>
                        <ext:Button runat="server" ID="btnSaveEmployee" Text="Lưu" Icon="Disk">
                            <DirectEvents>
                                <Click OnEvent="btnSaveEmployee_Click">
                                    <EventMask ShowMask="true" Msg="Đang lưu..." MinDelay="500" />
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                        <ext:Button Text="Quay lại" Icon="BuildCancel" OnClientClick="#{windowDetailEmployee}.close();">
                            <Listeners>
                                <Click Fn="ClearAll_EmployeeForm" Handler=""></Click>
                            </Listeners>
                        </ext:Button>
                    </Buttons>
                </ext:Panel>
            </Items>
        </ext:Window>
    </form>
</body>
</html>
